.detail-title {
	font-size: 26rpx;
	line-height: 1;
	margin: 10rpx 0 20rpx;
	padding: 8rpx;
	font-weight: bold;
	background-color: #4E6EF2;
	display: inline-block;
	position: relative;
	color: #fff;
	border: 1px solid #f1f1f1;
	&::before {
		content: '';
		display: block;
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 3px;
		top: 3px;
		background-color: #4E6EF2;
		border: 1px solid #f1f1f1;
	}
	&::after {
		content: '';
		display: block;
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 1px;
		top: 1px;
		background-color: #4E6EF2;
		border: 1px solid #f1f1f1;
	}
}

.form-item {
	font-size: 24rpx;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
	min-height: 28px;
	padding: 10rpx 0;
	.form-title {
		width: 170rpx;
		line-height: 28px;
	}
	.form-content {
		flex: 1;
	}
}

.is-link {
	color: #4E6EF2;
}

.this-radio {
	border-radius: 50%;
}
.this-checkbox {
	border-radius: 4rpx;
}
.this-checkbox,
.this-radio {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #c4c4c4;
	transition: all 0.15s ease;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	:v-deep .uni-icons {
		display: block;
		transition: all 0.15s ease;
		font-size: 30rpx !important;
		color: transparent !important;
		position: absolute;
		top: 50%;
		left: 50%;
		line-height: 30rpx;
		transform: translate(-50%, -50%);
	}
	&.is-actived {
		border-color: #4E6EF2;
		background-color: #4E6EF2;
		:v-deep .uni-icons {
			color: #fff !important;
		}
	}
}

.main-page {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: auto;
	&.detail-page {
		height: auto;
	}
	.isbg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		// opacity: 0.95;
		z-index: 1;
		/* #ifdef H5 */
  		max-width: 800rpx;
		left: 50%;
		transform: translateX(-50%);
		/* #endif */
	}

	.bg-next {
		position: relative;
		z-index: 2;
	}

	.list {
		position: relative;
		z-index: 2;
		padding: 20rpx 30rpx;
		background: rgba(155, 171, 190, 0.75);
		border-radius: 10rpx;
		width: calc(100% - 60rpx);
		box-sizing: border-box;
		margin: 0 auto;
		.search-box {
			width: 100%;
			border-radius: 10rpx;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			input {
				width: calc(100% - 70rpx);
				height: 54rpx;
				line-height: 54rpx;
				font-size: 26rpx;
				padding: 0 30rpx;
				box-sizing: content-box;
				border: 1px solid #bbb;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				background: #fff;
			}
			.btn {
				width: 70rpx;
				height: 54rpx;
				background-color: #ececec;
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				box-sizing: content-box;
				border: 1px solid #bbb;
				border-left: 0;
				position: relative;
				.btnbg {
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
		.box {
			.box-item {
				padding: 30rpx 0;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				&:not(:last-child) {
					border-bottom: 1px solid #bbb;
				}
				.box-img {
					width: 230rpx;
					height: 210rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-right: 24rpx;
					position: relative;
					.mask {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						background-color: rgba(51, 51, 51, 0.6);
						.text {
							font-size: 30rpx;
							color: #85dd37;
							font-weight: bold;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							z-index: 11;
						}
					}
				}
				image {
					width: 230rpx;
					height: 210rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
				.box-info {
					flex: 1;
					width: 100%;
					display: flex;
					flex-flow: column nowrap;
					align-items: flex-start;
					justify-content: center;
					.box-title {
						font-weight: bold;
						font-size: 28rpx;
						padding: 6rpx 0;
					}
					.box-text {
						font-size: 26rpx;
						padding: 6rpx 0;
						.is-red {
							font-weight: bold;
							padding-right: 4rpx;
						}
					}
				}
			}
		}
		.empty {
			color: #666;
			font-size: 30rpx;
			text-align: center;
			line-height: 300rpx;
		}
	}

	.detail {
		position: relative;
		z-index: 2;
		padding: 20rpx 30rpx;
		background: #fff;
		border-radius: 10rpx;
		width: calc(100% - 80rpx);
		box-sizing: border-box;
		.box-img {
			width: 100%;
			height: auto;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;
			.mask {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(51, 51, 51, 0.6);
				.text {
					font-size: 30rpx;
					color: #85dd37;
					font-weight: bold;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 11;
				}
			}
		}
		image {
			width: 100%;
			height: auto;
			border-radius: 10rpx;
			overflow: hidden;
			display: block;
		}
		.box-info {
			flex: 1;
			width: 100%;
			display: flex;
			flex-flow: column nowrap;
			align-items: flex-start;
			justify-content: center;
			.box-title {
				font-weight: bold;
				font-size: 26rpx;
				padding: 10rpx 0;
			}
			.box-text {
				font-size: 24rpx;
				padding: 10rpx 0;
			}
		}
	}
}

.uni-swiper-dot-box {
	width: 100%;
	height: 100%;
	:v-deep .swiper-box {
		height: 750rpx;
		image {
			width: 100%;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}
	}
	:v-deep .uni-swiper__dots-box {
		.uni-swiper__dots-item {
			background-color: rgba(255, 255, 255, 0.2) !important;
			border: 1px rgba(255, 255, 255, 0.6) solid !important;
		}
		.uni-swiper__dots-long {
			background-color: rgba(255, 255, 255, 0.6) !important;
		}
	}
}

.is-gray {
	color: #797979;
}
.is-red {
	color: rgb(184, 14, 37);
}
.is-green {
	color: rgb(37, 178, 100);
}

.height20 {
	width: 100%;
	height: 20rpx;
}
.height40 {
	width: 100%;
	height: 40rpx;
}
